<html lang="en"><head>
    <meta charset="UTF-8">
    <title>css垂直滚动</title>
    <style type="text/css">
    	@-webkit-keyframes scrollToUp {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 0 -258px;
    }
  }
  @keyframes scrollToUp {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 0 -258px;
    }
  }
  #imgBgc{
    height: 1000px;
    background-image: url("https://ww4.sinaimg.cn/bmiddle/6c938239ly1g550tojqmrj20v912ldo3.jpg"); /* 什么图片都可以*/
    background-attachment: fixed; /* 让背景图片和文本脱离*/
    background-position: center center;
    -webkit-animation: scrollToUp 5s linear infinite; /* 引入 scrollToUp动画 */
    animation: scrollToUp 5s linear infinite;
  }

    </style> 
</head>
<body>
    <div class="bag">
      <div id="imgBgc">
        <p>此文本是与图片分离的</p>
      </div>
    </div>

 </body>
 </html>